<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import {logListApi, logReadApi, type logType, type logListParamsType} from "@/api/log_api";
import type {columnType} from "@/components/admin/f_list.vue";
import F_avatar_title from "@/components/common/f_avatar_title.vue";
import {logLevelOptions} from "@/options";
import {reactive, ref} from "vue";

import {Message} from "@arco-design/web-vue";
import F_log_detail from "@/components/admin/f_log_detail.vue";


const columnDict = reactive({
  1: [
    {title: "ip(地址)", slotName: 'ip'},
    {title: "用户", slotName: 'user'},
    {title: "等级", dataIndex: 'level', type: "options", options: logLevelOptions},
    {title: "标题", slotName: 'title'},
    {title: "记录时间", dataIndex: 'createdAt', type: "date"},
    {title: "操作", slotName: 'action'},
  ],
  2: [
    {title: "标题", slotName: 'title'},
    {title: "等级", dataIndex: 'level', type: "options", options: logLevelOptions},
    {title: "记录时间", dataIndex: 'createdAt', type: "date"},
    {title: "操作", slotName: 'action'},
  ],
})

const visible = ref(false)
const body = ref("")
const logListParams = reactive<logListParamsType>({
  logType: 1,
})
const filters: filterGroupType[] = [
  {
    label: "等级",
    source: logLevelOptions,
    column: "level",
  }
]

const fListRef = ref()

function read(record: logType) {
  if (!record.isRead) {
    // 如果是未读状态，那就调一下接口
    logReadApi(record.id).then((res) => {
      if (res.code) {
        Message.error(res.msg)
        return
      }
      record.isRead = true
    })
  }

  body.value = record.content
  visible.value = true
}

function logTypeChange(val: string | number | boolean) {
  fListRef.value.getList(logListParams)
}

</script>

<template>
  <div class="logListView">
    <f_log_detail :content="body" v-model:visible="visible"></f_log_detail>
    <f_list
        ref="fListRef"
        :url="logListApi"
        no-add
        no-edit
        :filter-group="filters"
        :params="logListParams"
        :columns="columnDict[logListParams.logType]">
      <template #ip="{record}:{record: logType}">
        {{ record.ip }}({{ record.addr }})
      </template>
      <template #user="{record}:{record: logType}">
        <span v-if="record.userID === 0">-</span>
        <f_avatar_title v-else :title="record.userNickname" :avatar="record.userAvatar"></f_avatar_title>
      </template>
      <template #title="{record}:{record: logType}">
        <a :class="{isRead: record.isRead}" @click="read(record)"
           href="javascript:void (0)">{{ record.title ? record.title : '--' }}</a>
      </template>
      <template #search_other>
        <a-radio-group @change="logTypeChange" v-model="logListParams.logType">
          <a-radio :value="1">操作日志</a-radio>
          <a-radio :value="2">运行日志</a-radio>
        </a-radio-group>
      </template>
    </f_list>
  </div>
</template>

<style lang="less">
.logListView {
  .isRead {
    color: var(--color-text-2);
  }
}
</style>